<template>
  <div style="border:1px solid #ccc;margin:1em;padding:1em">
    <h2>子组件: money:{{money}}</h2>
    <p><button @click="fn">addMoney</button></p>
    <GrandSon />
  </div>
</template>
<script>
import { inject } from 'vue'
import GrandSon from './GrandSon.vue'
export default {
  name: 'Son',
  components: {
    GrandSon
  },
  setup () {
    // 接收祖先组件提供的数据
    const money = inject('money')

    const addMoney = inject('addMoney')
    console.log('addMoney', addMoney)

    const fn = (e) => {
        console.log(e)
        addMoney(100)
    }
    return { money, fn }
  }
}
</script>

